<template>
  <el-dropdown-item icon="el-icon-message" @click.native="dialogVisible = true">更换邮箱
    <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body width="30%" :close-on-click-modal="false">
      <Check :form="JSON.stringify(form)" ref="checkRef" v-show="checkVue"></Check>
      <Update :form="JSON.stringify(form)" ref="updateRef" v-show="updateVue"></Update>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkAndUpdate">{{ buttonName }}</el-button>
      </span>
    </el-dialog>
  </el-dropdown-item>
</template>

<script>
import Cookies from "js-cookie";
import Update from "@/views/home/aside/components/dropdown/items/checkEmail/Update.vue";
import Check from "@/views/home/aside/components/dropdown/items/checkEmail/Check.vue";
import { checkPhone, updateEmail } from "@/api/auth/user";

export default {
  name: "ChangeEmail",
  inject: ["getUserInfo"],
  components: { Update, Check },
  data() {
    return {
      title: "身份验证",
      buttonName: "下一步",
      dialogVisible: false,
      checkVue: true,
      updateVue: false,
      user: {},
      form: {},
    }
  },
  methods: {
    checkAndUpdate() {
      if (this.checkVue) {
        this.$refs.checkRef.$refs.form.validate(valid => {
          if (valid) {
            checkPhone({
              id: this.$refs.checkRef.forms.id,
              phone: this.$refs.checkRef.forms.phone,
              captcha: this.$refs.checkRef.forms.captcha
            }).then(res => {
              if (res.data.code === 200) {
                this.$message.success(res.data.message)
                this.form = {
                  captcha: ''
                }
                this.title = "更换邮箱"
                this.checkVue = false
                this.updateVue = true
                this.buttonName = "确定"
              } else {
                // this.$message.error(res.data.message)
              }
            })
          } else {
            return false
          }
        })
      } else {
        this.$refs.updateRef.$refs.form.validate(valid => {
          if (valid) {
            updateEmail({
              id: this.$refs.updateRef.forms.id,
              qqEmail: this.$refs.updateRef.forms.qqEmail,
              captcha: this.$refs.updateRef.forms.captcha
            }).then(res => {
              if (res.data.code === 200) {
                this.user.qqEmail = this.$refs.updateRef.forms.qqEmail
                Cookies.set("user", JSON.stringify(this.user))
                this.getUserInfo()
                this.dialogVisible = false
                this.$message.success(res.data.message)
              } else {
                // this.$message.error(res.data.message)
              }
            })
          } else {
            return false
          }
        })
      }
    },
  },
  created() {
    this.user = JSON.parse(Cookies.get("user"))
    this.form = {
      id: this.user.id,
      phone: this.user.phone,
      qqEmail: '',
      captcha: ''
    }
  }
}
</script>

<style scoped></style>
